<template>
    <base-breadcrumb :title="titleName">
        <a-spin :spinning="loading">
            <div class="box">
                <a-card>
                    <title-name title="项目信息"></title-name>
                    <div class="main_content">
                        <a-descriptions :column="{ xs: 2, sm: 2, md: 2 }">
                            <a-descriptions-item label="分公司名称">{{ project.branchCompany || '无' }}</a-descriptions-item>
                            <a-descriptions-item label="项目名称">{{ project.projectName || '无' }}</a-descriptions-item>
                        </a-descriptions>
                    </div>
                </a-card>
            </div>
            <div class="box">
                <a-card>
                    <title-name title="索赔信息"></title-name>
                    <div class="main_content">
                        <a-descriptions :column="{ xs: 2, sm: 2, md: 2 }">
                            <a-descriptions-item label="立项人">{{ claimInformation.projectSponsor }}</a-descriptions-item>
                            <a-descriptions-item label="立项人电话号码">{{ claimInformation.phone }}</a-descriptions-item>
                        </a-descriptions>
                        <a-descriptions :column="{ xs: 2, sm: 2, md: 2 }">
                            <a-descriptions-item label="立项人职务">{{
                                    claimInformation.proposalPersonPosition
                                }}
                            </a-descriptions-item>
                            <a-descriptions-item label="预计索赔金额(万元)">{{
                                    claimInformation.estimatedClaimAmount
                                }}
                            </a-descriptions-item>
                        </a-descriptions>
                        <a-descriptions :column="{ xs: 2, sm: 2, md: 2 }">
                            <a-descriptions-item label="立项时间">{{ claimInformation.projectTime }}</a-descriptions-item>
                            <!-- <a-descriptions-item label="索赔小组成员"
                            ><a-tag v-for="item in claimInformation.claimsPanelMember" :key="item.id">{{
                                    item.name
                                }}</a-tag></a-descriptions-item
                            > -->
                        </a-descriptions>
                        <a-descriptions :column="{ xs: 2, sm: 2, md: 2 }">
                            <a-descriptions-item label="索赔事项">{{ claimInformation.claims }}</a-descriptions-item>
                        </a-descriptions>
                        <a-descriptions :column="{ xs: 2, sm: 2, md: 2 }">
                            <a-descriptions-item label="索赔原因">{{ claimInformation.claimReason }}</a-descriptions-item>
                        </a-descriptions>
                    </div>
                </a-card>
            </div>
            <div class="box">
                <a-card>
                    <title-name title="推进记录"></title-name>
                    <a-button type="primary" style="margin-bottom: 10px" @click="addClaimRecord">新增索赔记录</a-button>
                    <a-table bordered size="small" :columns="colums" :data-source="loadData" rowKey="tableId" :pagination="false">
                        <div slot="attach" slot-scope="text, record">
                            <file-link :fileList="record.fileArrays"></file-link>
                        </div>
                        <div slot="Serial" slot-scope="text, record, index">
                            <template>
                                <span>{{ index + 1 }}</span>
                            </template>
                        </div>
                        <!-- <div slot="feedback" slot-scope="text, record">
                            <template>
                                <p v-for="(item, index) in record.feedback" :key="index" class="action_calss">
                                    <span>{{ item.name }}</span>
                                    <span>{{ item.position }}</span>
                                    <span style="margin-left: 10px">{{ item.time }}反馈了一条意见</span>
                                    <a style="margin-left: 10px" @click="getDetails(item)">查看</a>
                                </p>
                            </template>
                        </div> -->

                        <template slot="action" slot-scope="text, record">
                            <a @click="addClaimRecord(record)">编辑</a>
                            <a-divider type="vertical" />
                            <a @click="delClaimRecord(record)">删除</a>
                            <!-- <a @click="addNewFeedBack(record.tableId)">反馈意见</a> -->
                        </template>
                    </a-table>
                </a-card>
            </div>
            <div class="box" v-if="$route.query.id">
                <a-card>
                    <title-name title="附件列表"></title-name>
                    <u-table :uploadList="addFile" :deleteUrl="fileDel" :is-show="false"
                             :listUrl="fileList" :businessId="$route.query.id" businessCode="LCM11"></u-table>
                </a-card>
            </div>
        </a-spin>
        <div class="operation page-btn-right-top" style="text-align: right; margin-right: 20px">
            <a-button @click="$multiTab.close()">关闭</a-button>
        </div>
        <div class="coverlayer">
            <feed-back
                :visible="visible"
                :feedbackData="feedbackData"
                @ok="() => (visible = false)"
                @cancel="() => (visible = false)"
            >
            </feed-back>
            <add-advance-record
                ref="addUpdate"
                :visible="addClaimRecordVisible"
                :form="addClaimRecordForm"
                @ok="addClaimRecordVisible = false;getClaimEstablishmentDetails()"
                @cancel="addClaimRecordVisible = false"
            >
            </add-advance-record>
            <add-feedback
                ref="addFeedback"
                :visible="feedBackVisible"
                :loading="loading"
                @ok="postAddFeedBack"
                @cancel="() => (feedBackVisible = false)"
            ></add-feedback>

        </div>
    </base-breadcrumb>
</template>

<script>
import {
    claimEstablishmentAddFile,
    claimEstablishmentDeleteFile,
    claimEstablishmentFindFileList,
    getClaimEstablishmentDetails,
    postAdvanceRecord,
    postAdvanceRecordFeedbock,
    postAdvanceRecordEdit,
    postAdvanceRecordDelete
} from '@/api/legal'
import feedBack from '../feedback'
import addAdvanceRecord from '@/views/Legal/caseLawyerLetter/claimEstablishment/addAdvanceRecord'
import addFeedback from '@/views/Legal/caseLawyerLetter/addFeedback'

export default {
  name:'a'+Date.now(),
  components: {
        feedBack,
        addAdvanceRecord,
        addFeedback
    },
    data() {
        return {
            addFile: claimEstablishmentAddFile(),
            fileDel: claimEstablishmentDeleteFile(),
            fileList: claimEstablishmentFindFileList(),
            mdl: null,
            titleName: undefined,
            loading: false,
            queryParam: {},
            colums: [
                {
                    title: '序号',
                    scopedSlots: { customRender: 'Serial' },
                    align: 'center',
                    width:60
                },
                {
                    title: '推进事项',
                    align: 'center',
                    dataIndex: 'promotionMatters',
                },
                {
                    title: '附件',
                    align: 'center',
                    scopedSlots: { customRender: 'attach' },
                    width:150
                },
                {
                    title: '创建时间',
                    align: 'center',
                    dataIndex: 'recordTime',
                    width:200
                },
                // {
                //     title: '意见反馈',
                //     scopedSlots: { customRender: 'feedback' }
                // },
                {
                    title: '操作',
                    align: 'center',
                    dataIndex: 'action',
                    scopedSlots: { customRender: 'action' },
                    width:150
                }
            ],
            loadData: [],
            project: {},
            caseInformation: {},
            feedbackData: {},
            visible: false,
            claimInformation: {},
            advanceRecordVisible: false,
            tableId: undefined,
            feedBackVisible: false,
            isEdit: false,
            addClaimRecordVisible: false,
            addClaimRecordForm: {}
        }
    },
    created() {
        this.getClaimEstablishmentDetails()
    },
    methods: {
        getClaimEstablishmentDetails() {
            let that = this
            that.loading = true
            getClaimEstablishmentDetails({ id: that.$route.query.id })
                .then((res) => {
                    if (res.code === 200) {
                        that.loadData = res.data.advanceRecord || ''
                        that.project = res.data.project || ''
                        that.claimInformation = res.data.claimInformation || ''
                    }
                    that.loading = false
                })
                .catch((res) => {
                    that.loading = false
                })
        },
        getDetails(item) {
            this.feedbackData.name = item.name
            this.feedbackData.position = item.position
            this.feedbackData.time = item.time
            this.feedbackData.content = item.feedbackContent
            this.visible = true
        },
        addClaimRecord(row) {
            if (row && row.tableId) {
                this.addClaimRecordForm = row
            } else {
                this.addClaimRecordForm = {}
            }
            this.addClaimRecordForm.id = this.$route.query.id
            this.addClaimRecordVisible = true

        },
        delClaimRecord(row) {
          let _this = this;
          const param = {
            id: this.$route.query.id,
            tableId: row.tableId
          }
          this.$confirm({
            title: '温馨提示',
            content: '请确认是否要删除该条数据？',
            okType: 'danger',
            onOk() {
              return new Promise((resolve, reject) => {
                postAdvanceRecordDelete(param).then((res) => {
                  resolve();
                  if ((res && res.code == 200) || (res && res.data && res.data.code == 200)) {
                    _this.$message.success('删除成功');
                    _this.getClaimEstablishmentDetails()
                  } else {
                     _this.$message.error('删除失败');
                  }
                }).catch(() => {
                  reject()
                })
              })
            },
            onCancel() {
            },
          });
        },
        addNewFeedBack(id) {
            console.log(id)
            this.feedBackVisible = true
            this.tableId = id
        },
        postAddFeedBack(subQueryParam) {
            subQueryParam.id = this.$route.query.id
            subQueryParam.tableId = this.tableId
            subQueryParam.feedback = subQueryParam.feedbackContent
            this.loading = true
            const form = this.$refs.addFeedback.$refs.form
            form.validate((valid) => {
                if (!valid) {
                  this.$message.warning("请填写完所有必填项信息")
                    this.loading = false
                    return false
                }
                postAdvanceRecordFeedbock(subQueryParam)
                    .then((res) => {
                        this.loading = false
                        if (res.code === 200) {
                            this.$refs.addFeedback.queryParam = {}
                            this.feedBackVisible = false
                            this.$message.success('提交成功')
                            this.getClaimEstablishmentDetails()
                        } else {
                            this.$message.warning('提交失败')
                        }
                    })
                    .catch((err) => {
                        this.loading = false
                    })
            })
        }
    }
}
</script>

<style scoped>
.box {
    margin: 12px 0;
}

.coverlayer {
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: 0.4;
    filter: alpha(opacity=40);
}

.action_calss {
    margin-bottom: 0;
}

.main_content {
    padding: 0 20px;
    box-sizing: border-box;
}
</style>

